/**
*@Author 周贞荣
*@Modify 周贞荣
*@Date 2022/3/23 21:04
*@Description 底部导航
*/
<template>
    <van-tabbar v-model="path" replace fixed @change="changePage">
        <van-tabbar-item
                v-for="(nav,index) in navList"
                :key="index"
                :name="nav.path"
                :icon="nav.icon">
            {{nav.name}}
        </van-tabbar-item>
    </van-tabbar>
</template>

<script lang="ts" setup>
    import {useRoute} from "vue-router";
    import {ref, getCurrentInstance} from "vue";

    const {proxy} = getCurrentInstance();

    const route = useRoute();
    // 当前页面地址
    const path = ref(route?.path || '/home');
    // 底部导航
    const navList = ref([
        {icon: 'home-o', path: '/home', name: '首页'},
        {icon: 'apps-o', path: '/classify', name: '分类'},
        {icon: 'shopping-cart-o', path: '/shopCart', name: '购物车'},
        {icon: 'contact', path: '/my', name: '我的'},
    ]);

    /**
     * 地址切换
     */
    function changePage() {
        proxy.$router[path.value === '/shopCart' ? 'push' : 'replace']({path: path.value})
    }
</script>

<style scoped>

</style>